<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>查看物流</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" href="./css/wuLiu.css">

    <script type="text/javascript" src="../../js/base.js"></script>
    <style type="text/css">

        @media screen and (max-width:321px){
            .textarea-copyone{
                height: 1rem;
                float: right;
                width: 63%;
            }
        }
        @media screen and (min-width:321px) and (max-width:376px){
            .textarea-copyone{
                height: 1rem;
                float: right;
                width: 68%;
            }
        }
        @media screen and (min-width:377px) and (max-width:415px){
            .textarea-copyone{
                height: 1rem;
                float: right;
                width: 70%;
            }
        }

    </style>
</head>
<body>
<section id="app" v-cloak>
    <div v-if="navigator && navigator.onLine === true">
    <div v-if="wuLiuInfo.LogisticCode" style="position: relative">
        <div class="aui-card-list">
            <div class="aui-card-list-header aui-card-list-user aui-border-b">
                <div class="aui-card-list-user-avatar">
                    <img src="../../icon/4-1/feiJi.png" class="aui-img-round" />
                </div>
                <div class="aui-card-list-user-info">{{wuLiuInfo.shipping_name}}</div>

                <div class="aui-card-list-user-info">快递单号:<textarea  class="textarea-copyone"  id="copyTwo"  readonly="readonly">{{wuLiuInfo.LogisticCode}}</textarea></div>
                <input class="aui-pull-right copyBtn textCol" type="button" value="复制"   data-clipboard-action="copy" data-clipboard-target="#copyTwo" >
            </div>

        </div>
    </div>
    <div  v-if="wuLiuInfo.Traces" class="aui-timeline">
        <div class="aui-timeline-item" v-for="wuLiu,index in wuLiuArr">
            <div class="aui-timeline-item-label" style="background: none">
                <!--<img style="width:1.3rem;position:absolute;left:50%;margin-left:-0.8rem" src="../../icon/4-1/indentStyle.png" alt=""  >-->
                <img style="width:1.2rem;position:absolute;left:50%;margin-left:-0.8rem" src="../../icon/4-1/duiHao.png" alt="" v-if="index == 0">
                <img style="width:1.3rem;position:absolute;left:50%;margin-left:-0.8rem" src="../../icon/4-1/huoche.png" alt="" v-if="index>0 && index <(wuLiuArr.length-5)">
                <img style="width:1.3rem;position:absolute;left:50%;margin-left:-0.8rem" src="../../icon/4-1/indentStyle.png" alt="" v-if="index>wuLiuArr.length-5"><!-- 还要根据物流状态开始 数组最后是物流的开始-->
            </div>
            <div class="aui-timeline-item-inner">
                <div class="aui-card-list">
                    <div class="aui-card-list-header aui-border-b">
                        <div class="aui-flex-row ">
                            <p class="aui-font-size-12" v-html="wuLiu.AcceptStation"></p>
                            <p class="aui-font-size-12">{{index}}--{{wuLiu.AcceptTime}}</p>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    <div v-if="!wuLiuInfo.LogisticCode" class="aui-card-list">
            <div class="aui-card-list-header aui-card-list-user aui-border-b">
                <div class="aui-card-list-user-avatar">
                    <img src="../../icon/4-1/feiJi.png" class="aui-img-round" />
                </div>
                <div class="aui-card-list-user-info">物流名称:请耐心等待快递小哥揽件</div>
                <div class="aui-card-list-user-info">快递单号:</div>
            </div>
        </div>
   <div  v-if="!wuLiuInfo.LogisticCode">
       <div class="aui-flex-row aui-flex-item-12 content">
           <div class="aui-flex-item-12"  >
               <img src="../../icon/4-1/wuLiu.png" style="width:6rem;position:absolute;left:50%;top:50%;margin-left:-3rem;margin-top:5rem" alt="">
           </div>
           <div class="aui-felx-item-12"  style="width:10rem;position:absolute;left:50%;top:57%;margin-left:-5rem" >
               <div class="aui-text-center aui-margin-t-5">订单跟踪信息有延迟,请稍后</div>
           </div>
       </div>
   </div>
    </div>
    <div v-if="navigator && navigator.onLine === false" style="position:relative;" @click="goOnLine()">
        <div style="position:absolute;top:50%;left:50%;margin-top:8rem;margin-left: -3rem">
            <img src="../../icon/duanwang.png" alt="" style="width:6rem">
            <div class="aui-text-center">暂无网络</div>
        </div>
        <div  class="aui-text-center textCol" style="position:absolute;top:50%;left:50%;margin-top:15rem;margin-left: -86px">请连接网络后,点击刷新</div>
    </div>
</section>

<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-toast.js"></script>
<script type="text/javascript" src="../../js/clipboard.min.js"></script>
<script type="text/javascript" src="./js/wuliu.js" ></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>

</body>
</html>